@import '~@angular/material/theming';

// Custom color maps
$mat-white: (
    500: white,
    contrast: (
        500: $black-87-opacity
    )
);

$mat-black: (
    500: black,
    contrast: (
        500: white,
    )
);

$mat-notadddark: (
    50: #ECECEE,
    100: #C5C6CB,
    200: #9EA1A9,
    300: #7D818C,
    400: #5C616F,
    500: #3C4252,
    600: #353A48,
    700: #2D323E,
    800: #262933,
    900: #1E2129,
    A100: #C5C6CB,
    A200: #9EA1A9,
    A400: #5C616F,
    A700: #2D323E,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: white,
        400: white,
        500: $white-87-opacity,
        600: $white-87-opacity,
        700: $white-87-opacity,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: $white-87-opacity,
        A400: $white-87-opacity,
        A700: $white-87-opacity,
    )
);

// Define the Material palettes
$primary: mat-palette($mat-notadddark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);

// Create the Material theme object
$theme: mat-light-theme($primary, $accent, $warn);

// Store the background and foreground colors for easier access
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

// Force the input field font sizes to 16px
$typography: mat-typography-config(
    $input: mat-typography-level(16px, 1.125, 400)
)
